<!DOCTYPE html>
<html>

<head>
    <title>tz1989_uploader Demo</title>
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim"
        crossorigin="anonymous"></script>
    <script src="tz1989_uploader.js"></script>
</head>

<body>
    <input type="file" id="upLoadFile" />
    <div id="files"></div>
    <script>
        var uploader = tz1989_uploader({
            id: "upLoadFile",
            url: "/api/file/upload",
            width: 100,
            css: { "color": "#fff", "text-align": "center", "padding-top": "5px" },
            cssClass: "btn btn-success btn-sm",
            text: "上传文件",
            accept: "",
            multiple: true,
            autoUpload: false,
            selecting: function (src, file, index) {
                $("#files").append("<div>"+index+"."+file.name+"</div>");               
            },
            success: function (data, file, index) {
                console.log(data);
            }
        });
    </script>
</body>

</html>